@extends('Home.Common')

@section('include_css')
    <style>
        .box-body .menu .menu-bk{
            background-color:#ccc;
        }
        /*.select2{*/
            /*width:100%;*/
        /*}*/
    </style>

@endsection

@section('include_js')
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2.full.min.js') }}">
    <script type="text/javascript">


        // 添加
        $('.Menu-Add button.btn-primary').click(function(){
            var data = {};
            var res;
            data._token = $('meta[name=_token]').attr('content');
            data.pid = $('.Menu-Add .select_pid').val()
            data.name = $('.Menu-Add input[name=name]').val();
            if($('.Menu-Add .menu-type input:checked').val() == 2){
                data.permission = $('.Menu-Add .permission select').val()
            }
            $.ajax({url:"{{ action('Home\MenuController@add') }}",type:'post',async:false,data:data,success:function(data){
                res = data
            },error:function(){

            }});
            if(!res || !res.status){
                alert_info('添加失败');
            }
            alert_info('添加成功','',2,'{{ request()->url() }}');
        });

        // 编辑
        $('.Menu-Edit button.btn-primary').click(function(){

            var data = {};
            var res;
            data._token = $('meta[name=_token]').attr('content');
            data.id = $('.menu-bk').parent('.menu').attr('data-id');
            data.name = $('.Menu-Edit input[name=name]').val();
            data.order = $('.Menu-Edit input[name=order]').val();
            if($('.Menu-Edit .menu-type input:checked').val() == 2){
                data.permission = $('.Menu-Edit .permission select').val()
            }
            $.ajax({url:"{{ action('Home\MenuController@edit') }}",type:'post',async:false,data:data,success:function(data){
                res = data
            },error:function(){

            }});
            if(!res || !res.status){
                alert_info('修改失败');
            }

            alert_info('修改成功','',2,'{{ request()->url() }}');
        });
        //删除
        $('.Menu-Edit .btn-danger').click(function(){
            if(!confirm('是否删除此菜单')){
                return false;
            }
            var data = {};
            var res;
            data._token = $('meta[name=_token]').attr('content');
            var menu_bk = $('.menu-bk');
            data.id = menu_bk.parent('.menu').attr('data-id');
//            console.dir(data);return '';
            $.ajax({url:"{{ action('Home\MenuController@delete') }}",type:'post',async:false,data:data,success:function(data){
                res = data
            },error:function(){

            }});
            if(!res || !res.status){
                alert_info('删除失败');
            }
            menu_bk.remove();
            $('.Menu-Edit').modal('hide');
            alert_info('删除成功','',2);
        });

        // 点击 menu 的显示是事件
        $('.box-body .menu').on('click','.menu-name',function(){
            var menu = $(this).parent('.menu');
            var id = menu.attr('data-id');
            var children = $('.box-body .menu[data-pid='+id+']');
            if($('.box-body .menu[data-pid='+id+']:hidden').length){
                children.show(200);
            }else{
//                children.hide(200);
                childrenhide(children);
            }
            if($(this).hasClass('menu-bk')){
                $(this).removeClass('menu-bk');
            }else{
                $('.box-body .menu .menu-name').removeClass('menu-bk');
                $(this).addClass('menu-bk');
            }
            function childrenhide(children){
                var i ;
                var id;
                var menu;
                for(i=0;children[i];i++){
                    id = children.eq(i).attr('data-id');
                    if(id){
                        menu = $('.box-body .menu[data-pid='+id+']');
                        childrenhide(menu);
                    }
                }
                children.hide(200);
            }
        });


        // 父亲 级id select 选相框
        $('.select_pid').select2().change(function(){
            var pid = $('.menu-bk').parent('.menu').attr('data-pid');
            var input;
            var i ;
            if($('.menu[data-id='+pid+']').attr('data-pid')>0){
                input = $('.modal .menu-type input[value=1]');
                input.trigger('click');
            }
        });
        // 父亲 级id select 选相框
        $('.permission input').select2();


        $('.modal input[name=type]').click(function(){
            if($(this).val() == 1){
                var pid = $('.menu-bk').parent('.menu').attr('data-pid');
                if($('.menu[data-id='+pid+']').attr('data-pid')>0){
                    return false;
                }
                $('.permission').hide();
                $('.permission select').attr('disabled','disabled');
            }else{
//                $('#permission').removeAttribute('disabled');
                var res;
                var i;
                var data;
                var option;
                var menu_bk = $('.menu-bk').parent('.menu');
                var select = $('.permission select').removeAttr('disabled');
                if(!$('.permission select option').length){
                    $.ajax({url:'{{ action("Home\PermissionController@All") }}',async:false,success:function(data){
                        res = data;
                    },error:function(){

                    }});
                    if(res && res.status){
                        data = res.data;
                        for(i in data){
                            option = $('<option>').val(data[i].id).html(data[i].name);
                            select.append(option);
                        }
                    }
                }
                if(menu_bk.length == 1){
                    $('.permission select').val(menu_bk.attr('data-permission'))
                }
                $('.permission').show();
            }
        });


        // modal 显示的方法
        $('.Menu-Add,.Menu-Edit').on('show.bs.modal',function(){
            $('.permission').hide();
            var i ;
            var pid;
            var option;
            var menus = $('.menu');
            var select_pid = $('.select_pid');
            var menu_bk = $('.menu-bk').parent('.menu');
//            if(menu_bk.length != 1 && $(this).hasClass('Menu-Add')){
//            }

            select_pid.html('').append($('<option>').val(0).html('顶级菜单'));
            select_pid.val(0);
            for(i=0;menus[i];i++){
                if(!menus.eq(i).attr('data-permission')){
                    option = $('<option>').val(menus.eq(i).attr('data-id')).html(menus.eq(i).attr('data-name'))
                    select_pid.append(option);
                }
            }
            // 添加的 modal 显示的操作
            if($(this).hasClass('Menu-Add')){

                if(menu_bk.attr('data-pid')){
                    $('.modal .menu-type input[value=2]').trigger('click');
                }else{
                    $('.modal .menu-type input[value=1]').trigger('click');
                }
                if(menu_bk[0]){
                    pid = menu_bk.attr('data-id');
                }
                select_pid.val(pid?pid:0);
                if(!select_pid.val()){
                    pid = menu_bk.attr('data-pid');
                    select_pid.val(pid?pid:0);
                }

            }else if($(this).hasClass('Menu-Edit')){
                // 编辑的操作
                if(menu_bk.length != 1){
                    alert_info('请选择 菜单');
                    return false;
                }
                if(menu_bk.attr('data-permission')){
                    $('.modal .menu-type input[value=2]').trigger('click');
                }else{
                    $('.modal .menu-type input[value=1]').trigger('click');
                }
                $('.modal input[name=name]').val(menu_bk.attr('data-name'))
                $('.modal input[name=order]').val(menu_bk.attr('data-order'))
                if(menu_bk[0]){
                    pid = menu_bk.attr('data-pid');
                }
                select_pid.val(pid?pid:0);
            }
            select_pid.trigger('change');
        }).on('hide.bs.modal',function(){
            $('.modal select').val(0);
//            $('.modal input').val('');
        });
        // 设置 menu 列表 双击事件
        $('.menu-name').dblclick(function(){
            // 双击 结束 没有点击 class 添加
            if(!$(this).hasClass('menu-bk')){
                $(this).addClass('menu-bk');
            }
            $('.Menu-Edit').modal('show');
        });
        // 设置 select2 的样式
        $('.modal span.select2').width('60%').css('min-width','80px');
    </script>
@endsection
@section('Modal')



    {{--  添加 菜单 的 框 --}}
    <div class="modal fade Menu-Add"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">菜单添加</h4>
                </div>
                <form action="" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">菜单类别</label>
                            <div class="col-sm-8 text-left menu-type">
                                <input type="radio" name="type" value="1"> <i class="fa fa-th-list"></i> 菜单(能创建子级菜单)
                                <br/>
                                <input type="radio" name='type' value="2"> <i class="fa fa-file-o"></i> 链接(页面跳转)
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">选择父级菜单 :</label>
                            <div class="col-sm-8 text-left">
                                <select class="form-control select2 select_pid" name="pid">
                                    <option value="0">顶级菜单</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">菜单名称 :</label>
                            <div class="col-sm-8 text-left">
                                <input class="form-control" type="text" name="name" minlength="5" placeholder="">
                            </div>
                        </div>
                        <div class="form-group permission">
                            <label class="col-sm-3 text-right control-label">选择权限 :</label>
                            <div class="col-sm-8 text-left">
                                <select class="form-control select2 "  disabled="disabled" name="permission" >

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {{--  编辑 菜单 框 --}}
    <div class="modal fade Menu-Edit"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑添加</h4>
                </div>
                <form action="" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">菜单类别</label>
                            <div class="col-sm-8 text-left menu-type">
                                <input type="radio" name="type" value="1"> <i class="fa fa-th-list"></i> 菜单(能创建子级菜单)
                                <br/>
                                <input type="radio" name='type' value="2"> <i class="fa fa-file-o"></i> 链接(页面跳转)
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">选择父级菜单 :</label>
                            <div class="col-sm-8 text-left">
                                <select class="form-control select2 select_pid" disabled="disabled" name="pid" >
                                    <option value="0">顶级菜单</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">菜单名称 :</label>
                            <div class="col-sm-8 text-left">
                                <input class="form-control" type="text" name="name"  placeholder="">
                            </div>
                        </div>
                        <div class="form-group permission">
                            <label class="col-sm-3 text-right control-label">选择权限 :</label>
                            <div class="col-sm-8 text-left">
                                <select class="form-control select2 "  disabled="disabled" name="permission"  >

                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 text-right control-label">菜单排序 :</label>
                            <div class="col-sm-8 text-left">
                                <input class="form-control" type="text" name="order" minlength="5" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">删除菜单</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('content')

    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">菜单管理页面</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive ">

                    <div class="form-group text-right">
                        <button class="btn btn-success" data-toggle="modal" data-target=".Menu-Edit">编辑菜单</button>
                        <button class="btn btn-info" data-toggle="modal" data-target=".Menu-Add" style="margin-right:2rem;">添加菜单</button>
                    </div>
                    <div style="margin-left:2rem;font-size:2rem;">
                        {!! view('Home.Menu.menu',['menus'=>$menus,'menutype'=>false]) !!}
                    </div>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

@endsection